<template>
	<div id="main">
		<h3 style="text-align: center;color: red;" v-if="data.length > 1">{{title}}</h3>
		<el-table :data="tableData" style="width: 90%;margin-left: 5%;" stripe>
			<el-table-column v-for="(item,index) in typeList" :key="index" :prop="item.prop" :label="item.label"
				align="center">
			</el-table-column>
		</el-table>
		<el-row>
			<el-col :span="6" :offset="9" style="margin-top: 2vh;">
				<el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="10"
					layout="total, prev, pager, next" :total="total">
				</el-pagination>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	export default {
		name: 'dataTable',
		props: {
			// title: {
			// 	type: String,
			// 	default: '标题'
			// },
			// currentPage: {
			// 	type: Number,
			// 	default: 1
			// },
			// total: {
			// 	type: Number,
			// 	default: 10
			// },
		},
    data() {
    	return {
          title:'请选择单位相同的两种选项',
          currentPage:1,
          total:10,
          select:null,
          typeList:[{
							prop: 'year_date',
							label: '日期'
						},
						{
							prop: 'value',
							label: '数据'
						},
            {
            	prop: 'unit',
            	label: '单位'
            },
					],
          tableData:[],
          data:[],
          params:null,
          params1:null,
          url: {
            getEcharts: "/web/program/getEcharts",
          },
    	}
    },
		created() {

		},
		methods: {
      getPage(params,select){
        this.params = params;
        this.params1 = params;
        this.select = select
        this.currentChange()
      },
      currentChange(){
        this.params = JSON.parse(JSON.stringify(this.params1))
        let type = this.params.param.type;
        let area = this.params.param.area;
        let target = this.params.param.target;
        if(this.select == 1){
          if(area!= undefined && area.length > 1){
            for(let value in area){
              this.handleCurrentChange(area[value],1)
            }
          }else{
            this.handleCurrentChange()
          }
        }
        if(this.select == 2){
          if(target!= undefined && target.length > 1){
            for(let value in target){
              this.handleCurrentChange(target[value],2)
            }
          }else{
            this.handleCurrentChange()
          }
        }
        if(this.select == 3){
          if(type!= undefined && type.length > 1){
            for(let value in type){
              this.handleCurrentChange(type[value],3)
            }
          }else{
            this.handleCurrentChange()
          }
        }
      },
			async handleCurrentChange(value,type) {
        this.data = []
        if(this.params.param.area != undefined){
          this.params.param.area = this.params.param.area.toString()
        }
        if(type == 1){
          this.params.param.area = value
        }
        if(this.params.param.target != undefined){
          this.params.param.target = this.params.param.target.toString()
        }
        if(type == 2){
          this.params.param.target = value
        }
        if(this.params.param.type != undefined){
          this.params.param.type = this.params.param.type.toString()
        }
        if(type == 3){
          this.params.param.type = value
        }
        this.params.pageNum = this.currentPage
				let res = await this.$http.post(this.url.getEcharts,this.params);
        if(res.data.code == 200){
          let data = res.data.result.records
          this.data.push(data);
          this.tableData = []
          if(this.data.length > 2){
            this.$message.warning("仅可对比两种数据")
            return
          }
          let valueName = []
          this.data.forEach(e => {
            valueName.push(e[0].target)
          })

          if(this.data.length == 2){
            for(let value in this.data[0]){
              let param = {}
              param.year_date = this.data[0][value].year_date;
              param.value1 = this.data[0][value].value;
              param.value2 = this.data[1][value].value;
              param.difference =   (this.data[0][value].value - this.data[1][value].value).toFixed(2);
              param.unit = this.data[1][value].unit;
              this.tableData.push(param)
            }
            this.typeList = [{
          		prop: 'year_date',
          		label: '日期'
          	},
          	{
          		prop: 'value1',
          		label: valueName[0]
          	},
            {
            	prop: 'value2',
            	label: valueName[1]
            },
            {
            	prop: 'difference',
            	label: '差值'
            },
            {
            	prop: 'unit',
            	label: '单位'
            },
          ];
          }else{
            this.typeList = [{
            		prop: 'year_date',
            		label: '日期'
            	},
            	{
            		prop: 'value',
            		label: valueName[0]
            	},
              {
              	prop: 'unit',
              	label: '单位'
              },
            ];
            this.tableData = this.data[0]
          }
          console.log(this.data)
          this.total = res.data.result.total
        }else{
          this.$message.warning(res.data.message)
        }
			}
		}
	}
</script>

<style lang="scss" scoped>
	#main {
		width: 100%;
		height: 71vh;
		padding-top: 4vh;
	}
</style>
